<template>
    <div class="pagination">
        <a-pagination
            size="small"
            v-model:current="currentPage"
            v-model:pageSize="currentPageSize"
            :total="props.total"
            :pageSizeOptions="pageSizeOptions"
            :show-total="(total, range) => `第${range[0]}-${range[1]}条 总共 ${total} 条`"
            @change="sizeChange"
        />
    </div>
</template>
<script>
export default {
    name: 'TablePagination'
}
</script>
<script setup>
import { defineProps, computed, defineEmits } from 'vue'
const props = defineProps({
    page: {
        type: Number,
        default: 1
    },
    total: {
        type: Number
    },
    pageSize: {
        type: Number,
        default: 10
    },
    pageSizeOptions: {
        type: Array,
        default: ['10', '20', '30', '40']
    }
})
const emit = defineEmits(['pagination', 'update:page', 'update:pageSize'])
const currentPage = computed({
    get() {
        return props.page
    },
    set(val) {
        emit('update:page', val)
    }
})

const currentPageSize = computed({
    get() {
        return props.pageSize
    },
    set(val) {
        emit('update:pageSize', val)
    }
})
const sizeChange = (page, size) => {
    emit('pagination', { page, size })
}
</script>
<style scoped lang="scss">
.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 10px 10px 0 0;
}
</style>
